<template>
<div class="layout">
    <Header :title="title" ref="header" v-bind="$attrs">
        <template #but>
            <slot name="but"></slot>
        </template>
    </Header>

    <!-- <slot></slot> -->
    <component :is="layout"></component>
</div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ""
        },
        layout: {
            type: String,
            default: "Customize"
        },
        isAuth: {
            type: Boolean,
            default: false
        }
    },
    provide: function () {
        return {
            action: this.action,
            modules: this.modules,
            layoutSize: this.layoutSize
        }
    },
    data() {
        return {
            action: {},
            modules: {},
            layoutSize: {
                height: 0,
                width: 0,
            }
        }
    },
    methods: {
        getPermission() {
            let rolesRes = JSON.parse(window.localStorage.getItem("ccMenuItem"))
            this.$api.system.listByRoleids({
                resid: rolesRes.id
            }).then(res => {
                let rows = res.rows
                let self = this
                rows.map(item => {
                    if (item.type == 1) {
                        self.$set(self.modules, item.code, item)
                    } else {
                        self.$set(self.action, item.code, item)
                    }
                })
            })
        },
        getLayoutHeight() {
            return document.querySelector("#app").offsetHeight - 70
        }
    },
    created() {
        this.layoutSize.height = this.getLayoutHeight()
        let self = this
        window.onresize = function windowResize(e) {
            self.layoutSize.height = self.getLayoutHeight()
        }

        if (this.isAuth) {
            this.getPermission()
        }
    },
    activated() {
        this.layoutSize.height = this.getLayoutHeight()
        let self = this
        window.onresize = function windowResize(e) {
            self.layoutSize.height = self.getLayoutHeight()
        }
    },
    destroyed() {
        window.onresize = null
    }
}
</script>

<style lang="less" scoped>
.layout {
    padding: 50px 0px 0px;
    width: 100%;
    height: 100%;
}
</style>
